
// TestPage.vue
<template>
  <div class="test-page">
    <h2>MBTI 测试</h2>
    <QuestionCard
        v-for="(q, i) in questions"
        :key="i"
        :question="q"
        :index="i"
        v-model="answers[i]"
    />
    <button :disabled="!allAnswered" @click="submit">提交</button>
  </div>
</template>

<script>
import QuestionCard from '@/components/QuestionCard.vue';
import { submitAnswers } from '@/api/mbti';

export default {
  name: 'TestPage',
  components: { QuestionCard },
  data() {
    return {
      questions: [
        { text: '你更喜欢独处还是社交？', A: '独处', B: '社交' },
        { text: '你更关注事实还是理论？', A: '事实', B: '理论' },
        // 可继续添加题目
      ],
      answers: []
    };
  },
  computed: {
    allAnswered() {
      return this.answers.length === this.questions.length && this.answers.every(a => a);
    }
  },
  methods: {
    async submit() {
      try {
        console.log('提交答案:', this.answers);
        const res = await submitAnswers({ userId: 'test001', answers: this.answers });
        console.log('返回结果:', res);
        this.$router.push({ path: '/result', query: { user: 'test001' } });
      } catch (e) {
        console.error('提交失败', e);
        alert('提交失败，请重试');
      }
    }


  }
};
</script>

<style>
.test-page {
  max-width: 600px;
  margin: 20px auto;
}
button {
  padding: 10px 20px;
}
</style>
